<template>
  <div class="menu">
    <el-menu class="el-menu-vertical" default-active="0-0">
      <template v-for="(subMenu, subIndex) in menuData" :key="subIndex">
        <el-sub-menu :index="subIndex" v-if="subMenu.children?.length">
          <template #title>{{ subMenu.meta.title }}</template>
          <el-menu-item
            :index="`${subIndex}-${index}`"
            v-for="(menu, index) in subMenu.children"
            :key="index"
            @click="handleMenuItem(menu)"
          >
            <span>{{ menu.meta.title }}</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item
          v-else
          :index="`${subIndex}`"
          @click="handleMenuItem(subMenu)"
        >
          <span>{{ subMenu.meta.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<script setup lang="ts">
// import { useRouter } from 'vue-router';
// import { RouteRecordRaw } from 'vue-router';

defineProps({
  menuData: {
    type: Array<any>,
    default: [],
  },
});
const emits = defineEmits(["handleMenuItem"]);

// const router = useRouter();
// const menuData = router.options.routes;

const handleMenuItem = (data: any) => {
  // router.push(data.path);
  emits("handleMenuItem", data);
};
</script>
<style lang="scss" scoped>
.menu {
  :deep(.el-sub-menu) {
    width: 200px;
  }
}
</style>
